<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:goBack();" class="ui_back"></a>表单</header>
        <div class="ui_page_bd">
            <p class="ui_con_block">
                这里囊括了各种表单元素，从此，告别表单烦恼。
            </p>
            <!-- /// [htmldemo] -->
            <fieldset class="ui_legend">
              <legend>右对齐风格</legend>
            </fieldset>
            <ul class="ui_form ui_form_layout_right">
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">滑块</label>
                    <div class="ui_form_content ui_flex_item">
                        <label class="ui_slider_check">
                            <input type="checkbox" checked>
                        </label>
                    </div>
                </li>       
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">复选</label>
                    <div class="ui_form_content ui_flex_item">
                        <label class="ui_checkbox">
                          <input type="checkbox" checked value="yes" name="checkbox">
                          <b>同意</b>
                        </label> 
                   </div>        
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">单选</label>
                    <div class="ui_form_content ui_flex_item">
                        <label class="ui_radio">
                              <input type="radio" value="yes" checked name="radio">
                              <b>YES</b>
                            </label> 
                            <label class="ui_radio">
                              <input type="radio" value="no" name="radio">
                              <b>NO</b>
                        </label> 
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">日期选择</label>
                    <div class="ui_form_content ui_flex_item">
                       <input type="text" readonly name="" placeholder="请选择" id="date-picker" class="ui_ipt">
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">范围选择</label>
                    <div class="ui_form_content ui_flex_item">
                        <small id="rangeVal" class="mr5 c999">30</small>
                        <input type="range" oninput="changeRange(this)" value="30" min="1" max="100" step="1" class="ui_range">                       
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">下拉选择</label>
                    <div class="ui_form_content ui_flex_item">
                       <select class="ui_select placeholderColor" name="select" onchange="lui.changeSelectStyle(event)">
                           <option value="">请选择</option>
                           <option value="1">女汉子</option>
                           <option value="2">萌妹子</option>
                       </select>
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">星星评分</label> 
                    <div class="ui_form_content ui_flex_item">
                        <ul class="ui_star_review fr" id="star1">
                            <li class="item" title="差"><input value="1" type="radio" name="review" hidden="hidden"></li>
                            <li class="item" title="较差"><input value="2" type="radio" name="review" hidden="hidden"></li>
                            <li class="item" title="一般"><input value="3" type="radio" name="review" hidden="hidden"></li>
                            <li class="item" title="好"><input value="4" type="radio" name="review" hidden="hidden"></li>
                            <li class="item" title="很好"><input value="5" type="radio" name="review" hidden="hidden"></li>
                        </ul>
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">单行输入框</label>
                    <div class="ui_form_content ui_flex_item">
                       <input type="text" placeholder="请输入" class="ui_ipt">
                    </div>
                </li>
                <li class="ui_form_item">
                    <label class="ui_form_label">多行输入框</label>
                    <div class="">
                       <textarea placeholder="请输入" class="ui_textarea" rows="5"></textarea>
                    </div>
                </li>
                <li class="ui_form_item">
                    <label class="ui_form_label">图片上传</label>
                    <div class="ui_uploader_control" id="upload_photo">
                        <ul class="ui_uploader_box" data-role="upload-list">
                        </ul>
                        <label class="ui_uploader"><input type="file" accept="image/gif,image/jpeg,image/png" hidden data-role="upload-btn"></label>
                   </div>
                </li>

                <li class="ui_form_item">
                  <label class="ui_form_label">图片上传-已有图片</label>
                  <div class="ui_uploader_control" id="upload_photo2">
                    <ul class="ui_uploader_box" data-role="upload-list">
                    </ul>
                    <label class="ui_uploader"><input type="file" accept="image/gif,image/jpeg,image/png" hidden
                        data-role="upload-btn"></label>
                  </div>
                </li>
            </ul>
            <fieldset class="ui_legend">
              <legend>左对齐风格</legend>
            </fieldset>
            <ul class="ui_form ui_form_layout_left">
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">滑块</label>
                    <div class="ui_form_content ui_flex_item">
                        <label class="ui_slider_check">
                            <input type="checkbox" checked>
                        </label>
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">下拉选择</label>
                    <div class="ui_form_content ui_flex_item">
                       <select class="ui_select placeholderColor" name="select" onchange="lui.changeSelectStyle(event)">
                           <option value="">请选择</option>
                           <option value="1">女汉子</option>
                           <option value="2">萌妹子</option>
                       </select>
                    </div>
                </li>
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">单行输入框</label>
                    <div class="ui_form_content ui_flex_item">
                       <input type="text" placeholder="请输入" class="ui_ipt">
                    </div>
                </li>                
            </ul>
            <fieldset class="ui_legend">
              <legend>详情预览风格</legend>
            </fieldset>
            <ul class="ui_form ui_form_detail">
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">姓名</label>
                    <div class="ui_form_content ui_flex_item">
                        <span>张婷</span>
                    </div>
                </li>       
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">午餐补助次数</label>
                    <div class="ui_form_content ui_flex_item">
                        <span>15</span>
                    </div>
                </li>   
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">午餐补助合计</label>
                    <div class="ui_form_content ui_flex_item">
                        <span>225</span>
                    </div>
                </li>   
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">加班次数</label>
                    <div class="ui_form_content ui_flex_item">
                        <span>12</span>
                    </div>
                </li>     
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">加班餐补</label>
                    <div class="ui_form_content ui_flex_item">
                        <span>180</span>
                    </div>
                </li>   
                <li class="ui_form_item ui_flex">
                    <label class="ui_form_label">合计餐补</label>
                    <div class="ui_form_content ui_flex_item">
                        <span>405</span>
                    </div>
                </li>  
            </ul>
            <!-- /// [htmldemo] -->
        </div>    
    </div>

<script type="text/javascript" src="js/3rd-plugins/jquery-1.10.1.min.js"></script>
<!--公共js-->
<script type="text/javascript" src="js/lui.js"></script>
<!--日历css和js-->
<link rel="stylesheet" type="text/css" href="css/3rd-css/mobiscroll.2.13.2.min.css">
<script type="text/javascript" src="js/3rd-plugins/mobiscroll.2.13.2.min.js"></script>
<script type="text/javascript" src="js/lib/form.js"></script>
<!-- 图片预览css和js -->
<link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.3/viewer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.3/viewer.min.js"></script>
<!-- viewerjs文档：https://fengyuanchen.github.io/viewerjs/ -->
<script type="text/javascript">
    ///[jsdemo]
    //星级评分
    form.Raty('#star1 li',function(num){
          console.log('选中了'+num+'颗星');
      })
    //图片上传
    form.chooseImage('#upload_photo', [], function(imgList){
       console.log('imgList', imgList);
    });

    //图片上传2
    form.chooseImage('#upload_photo2', [{
      url:'images/redtory1.jpg'
    }], function(imgList){
       console.log('imgList', imgList);
      //图片预览
      var viewer = new Viewer(document.getElementById('upload_photo2'), {
        url: 'data-original',
        show: function () {  // 动态加载图片后，更新实例
          viewer.update();
        }
      })
    });
    //滑块监听
    function changeRange(_this){
        form.changeRange(_this)
    }
	
    /*日期选择*/
    var d = new Date();
    //设置初始化
    $("#date-picker").val(d.Format("yyyy-MM-dd ")+"09:00");
    //日历插件
    $('#date-picker').mobiscroll(opt);
    ///[jsdemo]
</script>
</body>
</html>